<!--
Copyright (C) 2016-2023 Jones Magloire @Joxit

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<catalog-element>
  <!-- Begin of tag -->
  <div
    class="content"
    if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}"
  >
    <material-card
      class="list highlight"
      expanded="{state.expanded}"
      onclick="{ onClick }"
      if="{ !props.showCatalogNbTags || state.nbTags !== 0 }"
    >
      <a if="{ state.image }" href="{ router.taglist(state.image) }">
        <material-waves center="true" color="#ddd"></material-waves>
      </a>
      <material-waves if="{ state.images }" center="true" color="#ddd"></material-waves>
      <span>
        <i class="material-icons">send</i>
        { state.image || state.repo }
        <div if="{state.images}" class="item-count right">
          { state.nImages } images
          <i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
        </div>
        <div if="{props.showCatalogNbTags && state.image}" class="item-count right">
          { state.nbTags } tags
          <i class="material-icons animated"></i>
        </div>
      </span>
    </material-card>
    <catalog-element
      if="{ state.images }"
      filter-results="{ props.filterResults }"
      registry-url="{ props.registryUrl }"
      on-notify="{ props.onnNotify }"
      on-authentication="{ props.onAuthentication }"
      show-catalog-nb-tags="{ props.showCatalogNbTags }"
      is-registry-secured="{ props.isRegistrySecured }"
      class="animated {!state.expanded && !props.filterResults ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
      each="{item in state.images}"
      z-index="{ props.zIndex - 1 }"
      item="{ item }"
    ></catalog-element>
  </div>
  <script>
    import router from '../../scripts/router';
    import { Http } from '../../scripts/http';
    import { matchSearch } from '../search-bar.riot';

    export default {
      onBeforeMount(props, state) {
        if (props.item.images && props.item.images.length === 1) {
          state.image = props.item.images[0];
        } else if (typeof props.item === 'string') {
          state.image = props.item;
        } else if (props.item.images && props.item.repo) {
          state.images = props.item.images;
          state.repo = props.item.repo;
          state.nImages = props.item.images.length;
          state.expanded = props.catalogDefaultExpanded;
        }
        if (props.showCatalogNbTags && state.image) {
          this.getNbTags(props, state);
        }
      },
      onMounted(props, state) {
        const materialCard = this.$('material-card');
        if (materialCard) {
          materialCard.style['z-index'] = props.zIndex;
        }
      },
      onBeforeUpdate(props, state) {
        if (props.filterResults && state.images) {
          state.nImages = state.images.filter((image) => matchSearch(props.filterResults, image)).length;
        } else {
          state.nImages = state.images && state.images.length;
        }
      },
      onClick() {
        const state = this.state;
        if (state.repo) {
          this.update({
            expanded: !this.state.expanded,
            expanding: true,
          });
          setTimeout(() => {
            this.update({
              expanding: false,
            });
          }, 50);
        }
      },
      getNbTags(props, state) {
        const self = this;
        const oReq = new Http({
          onAuthentication: props.onAuthentication,
          withCredentials: props.isRegistrySecured,
        });
        oReq.addEventListener('loadend', function () {
          if (this.status === 200) {
            const nbTags = (JSON.parse(this.responseText).tags || []).length;
            self.update({ nbTags });
          } else if (this.status === 404) {
            props.onNotify('Server not found', true);
          } else {
            props.onNotify(this.responseText, true);
          }
        });
        oReq.addEventListener('error', function () {
          props.onNotify(this.getErrorMessage(), true);
        });
        oReq.open('GET', props.registryUrl + '/v2/' + state.image + '/tags/list');
        oReq.send();
      },
      matchSearch,
      router,
    };
  </script>
  <!-- End of tag -->
</catalog-element>
